<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list">
                <span>{{index}}</span>
                <span>{{item.name}}</span>
                <span>{{item.age}}</span>
                <span>{{item.wife}}</span>
                <button @click="delFn(index)">del</button>
                <button @click="updateFn(index)">update</button>
            </li>
        </ul>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            list:[
                {name:"达姆",age:18,wife:"冬雨"},
                {name:"老付",age:48,wife:"冬瓜"},
                {name:"老刘",age:68,wife:"西瓜"},
                {name:"小乐",age:78,wife:"南瓜"}
            ]
        },
        methods:{
            delFn(index){
                /*array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
                    1. 这个数组api是用来干什么的
                        对数组进行CUD操作
                    2. 这个数组api的参数有哪些
                        start:起始位置
                        deleteCount:删除几个元素
                        [, item1[, item2[, ...]]]] : 添加的新元素
                    3. 这个数组api的返回值是什么
                        由被删除的元素组成的一个数组
                    4. 这个数组api会不会影响老数组
                        会影响老数组
                */
                this.list.splice(index,1)
            },
            updateFn(index){
                /*this.list[index] = {
                    name:"安妮",
                    age:48,
                    wife:"..."
                }*/

                // this.list[index].name = "安妮";
                // this.list[index].age = 48;
                // this.list[index].wife = "...";

                this.list.splice(index,1,{
                    name:"安妮",
                    age:48,
                    wife:"......"
                })
            }
        }
    })
</script>
</html>